<template>
	<view>
		<view class="top_bar">
			<image class="back" src="../../static/Myimg/zuo1.png" mode="" @click="go_back"></image>
			<image class="share" src="../../static/Myimg/share1.png" mode="" @click="goShare"></image>
			<u-popup :show="sharePopup" mode="bottom" @close="closeShare">
			<share02></share02>
			</u-popup>
		</view>
		<view class="up_body">
			<image  class="up_back" :src="user.bgUrl" mode=""></image>
			<view class="up_content">
				<image class="aglin toxiang" :src="user.profilePrcture" mode=""></image>
			    <text class="aglin title">{{user.username}}</text>
				<text class="aglin xhsNum">卖货郎号：{{user.uuid}}</text>
				<text class="aglin jianjie">{{user.bio}}</text>
			<view class="">
				<u-line margin=" 65rpx auto " length="300px"></u-line>
			</view>
			<view class="aglin small_title">
				卖货郎
			</view>
			<text class="aglin find">扫描二维码 <br />在卖货郎找到我</text>
			<!-- <image class="MyER" src="../../static/Myimg/MyER.jpg" mode=""></image> -->
			<image  class="MyER" :src="qrCodeData" mode=""></image>
		

			</view>
		<view class="item">
			<view class="item_bottom first" @click="saoma">
				<image src="../../static/Myimg/saoma.png" mode=""></image>
				<text>扫一扫</text>
			</view>
			<view class="item_bottom second" @click="go_photo">
				<image src="../../static/Myimg/download.png" mode=""></image>
				<text class="down">下载到相册</text>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	// 导入生成二维的依赖
	import QRCode from 'qrcode-js';
	import share02 from '@/pages/My/components/share02.vue' 
	export default {
		data() {
			return {
				sharePopup:false,
				canvasId: 'qrcodeCanvas',
			    qrCodeData:'',
				user:{
					
				},
				
			}
		},
		methods: {
			saoma(){
				uni.scanCode({
				        success: (res) => {
				          console.log('扫码结果：', res);
				          // 处理扫码结果，例如跳转到对应的页面或执行其他逻辑
				        },
				        fail: (err) => {
				          console.error('扫码失败：', err);
				          // 处理扫码失败情况
				        }
				      });
			},   
			go_photo(){
				
			},
			closeShare(){
				this.sharePopup =!this.sharePopup
			},
			fetchQRCode(user) {
				this.request("/userhomepage/generate", "post",user).then(data => {
					console.log(data);
					this.qrCodeData= "data:image/png;base64,"+data.data.message; // 将返回的 Base64 数据赋给 qrCodeData
				    console.log(this.qrCodeData);
				 }).catch(err => {
					console.error(err);
				});
			},
			go_back(){
				uni.navigateBack({
					delta:2
				})
			},
			goShare(){
				this.sharePopup =!this.sharePopup
			}
		},
		onLoad(e){
		console.log(e);
		let userStr = decodeURIComponent(e.user);
		this.user = JSON.parse(userStr);
		console.log(this.user);
		this.fetchQRCode(this.user)
		   // 生成二维码
		   // this.generateQRCode();
		},
		components:{
			share02
		}
	}
</script>

<style scoped>
	.top_bar{
		width: 100%;
		height: 200rpx;
		display: flex;
	}
	.top_bar image{
		width:45rpx;
		height: 45rpx;
		margin-top: 100rpx;
	}
	.back{
		margin-left: 20rpx;
	}
	.share{
		margin-left: 600rpx;
	}
	.aglin{
		margin-left: 60rpx;
	}
	.container {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 100vh;
	}
   .up_body{
	   
   }
   .up_back{
	   width: 86%;
	   height: 600rpx;
	    margin: 100rpx 50rpx ;
		 border-radius: 60rpx 60rpx 0 0;
   }
   .up_content{
	   width: 86%;
	   margin: 100rpx auto;
	   height: 800rpx;
	   margin: 120rpx 50rpx ;
	   background-image: linear-gradient(to bottom right, #ff2442, #fd3f59, #ff8f9f);
	     position: absolute;
	     top: 420rpx;
	     left: 0;
	    border-radius: 60rpx ;
		}
   .toxiang{
	   width: 140rpx;
	   height: 140rpx;
	   border-radius: 50%;
	   margin: 60rpx;
	   border: 2rpx solid white;
   }
   .title{
	   color: white;
       font-size: 40rpx;
       display: block;
      
   }
   .xhsNum{
	   margin-top: 40rpx;
	   color: #f29199;
	   font-size: 25rpx;
   }
   .jianjie{
	   color: #f0d6de;
	   font-size: 30rpx;
	   display: block;
	   margin-top: 70rpx;
   }
   .small_title{
	   width: 120rpx;
	   height: 50rpx;
	   border-radius: 70rpx;
	   color: #ff2744;
	   margin-top: ;
	   background-color: white;
	   font-family: "黑体";
	   font-weight: 600;
	   text-align: center;
       line-height:47rpx ;
   }
   .find{
	   color:#f29199 ;
	   display: block;
	   margin-top: 25rpx;
       width: 350rpx;
   }
   .MyER{
	   width: 160rpx;
	   height: 160rpx;
	   margin-top: -400rpx;
	   margin-left: 430rpx;
	   top: -40rpx;
	  border-radius: 10rpx;
   }
   .item{
	   width: 86%;
	   height: 150rpx;
	   display: flex;
	   margin-top: 400rpx;
	   margin-left: 50rpx;
	}
   .item_bottom {
	   width: 90rpx;
	   height: 90rpx;
	   border-radius: 50%;
	   background-color: #f4f4f4;
	   margin-left: 100rpx;
   }
   .second{
	    margin-left: 270rpx;
   }
   .item_bottom image{
	   width: 50rpx;
	   height: 50rpx;
	   margin: 15rpx 20rpx;
   }
   .item_bottom text{
   	  display: block;
      width: 180rpx;
	  margin-top: 20rpx;
	  font-size: 27rpx;
   }
   .down{
	   margin-left: -20rpx;
   }
</style>
